<template>
    <div class="elCard">
        <el-card>
            <el-form label-width="100px" ref="ruleFormRef" :model="ruleForm" :rules="rules" :status-icon="statusIcon"
                :hide-required-asterisk="hideAsterisk">
                <el-form-item label="秒杀订单超过：" label-width="150px" prop="flashOrderOvertime">
                    <el-input v-model="ruleForm.flashOrderOvertime">
                        <template #append>分</template>
                    </el-input>
                    <span>未付款，订单自动关闭</span>
                </el-form-item>
                <el-form-item label="正常订单超过：" label-width="150px" prop="normalOrderOvertime">
                    <el-input v-model="ruleForm.normalOrderOvertime">
                        <template #append>分</template>
                    </el-input>
                    <span>未付款，订单自动关闭</span>
                </el-form-item>
                <el-form-item label="发货超过：" label-width="150px" prop="confirmOvertime">
                    <el-input v-model="ruleForm.confirmOvertime">
                        <template #append>分</template>
                    </el-input>
                    <span>未收货，订单自动完成</span>
                </el-form-item>
                <el-form-item label="订单完成超过：" label-width="150px" prop="finishOvertime">
                    <el-input v-model="ruleForm.finishOvertime">
                        <template #append>分</template>
                    </el-input>
                    <span>自动结束交易，不能申请售后</span>
                </el-form-item>
                <el-form-item label="订单完成超过：" label-width="150px" prop="commentOvertime">
                    <el-input v-model="ruleForm.commentOvertime">
                        <template #append>分</template>
                    </el-input>
                    <span>自动五星好评</span>
                </el-form-item>
                <el-form-item label-width="150px">
                    <el-button type="primary" @click="push(ruleFormRef)">提交</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http'

import {
    ElMessage,
    ElMessageBox,
    FormInstance,
    FormRules,
} from "element-plus";

import { onMounted, reactive, ref } from "vue";

const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
    id: 1,
    flashOrderOvertime: 0,
    normalOrderOvertime: 0,
    confirmOvertime: 0,
    finishOvertime: 0,
    commentOvertime: 0,
});
const hideAsterisk = ref(true);
const statusIcon = ref(false);
onMounted(() => {
    http.order.orderSetting(ruleForm.value.id).then((res) => {
        ruleForm.value = res.data;
    });
});
const rules = reactive<FormRules>({
    flashOrderOvertime: [
        {
            required: true,
            message: "时间不能为空",
            trigger: "change",
        },
    ],
    normalOrderOvertime: [
        {
            required: true,
            message: "时间不能为空",
            trigger: "change",
        },
    ],
    confirmOvertime: [
        {
            required: true,
            message: "时间不能为空",
            trigger: "change",
        },
    ],
    finishOvertime: [
        {
            required: true,
            message: "时间不能为空",
            trigger: "change",
        },
    ],
    commentOvertime: [
        {
            required: true,
            message: "时间不能为空",
            trigger: "change",
        },
    ],
});

const push = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm("是否要提交修改", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                http.order.orderSettingUpdate(ruleForm.value).then((res) => {
                    if (res.code == 200) {
                        ElMessage.success("提交成功");
                    }
                });
            });
        } else {
            ElMessage.warning("提交参数不合法");
        }
    });
};
</script>

<style scoped lang="less">
.el-card {
    width: 720px;
    margin: 0 auto;
    padding: 35px 35px 15px 35px;
}

.el-input {
    width: 320px;
}

span {
    margin-left: 15px;
}
</style>
